import './CreateLevel.less'
import {Button, Card, Form, Input, message, Space, Upload,} from 'antd';
import File from '../../../components/CustomerService/File'
import {Link} from "react-router-dom";
import {useNavigate} from "react-router";
import {useState} from "react";
import ImgCrop from "antd-img-crop";
import http from "../../../utils/http";
const CreateLevel =()=>{
    const [fileList,setFileList] = useState([]);
    const [formData,setFormData] = useState({
        account:JSON.parse(sessionStorage.getItem('user')).username,
        adminphone:'',
        headphoto:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F19%2F34%2F41%2F6e7b6e22_E193441_e21c0c7g.png%21%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fpng%2Ffh%2F630&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642426439&t=c7143341b047689e5b776a87f08d84b4',
        name:'',
        password:'',
        phone:'',
        wechat:'',
        qrcode:''
    });
    const [data,setData] = useState({});

    const navigate = useNavigate();
    const [form] = Form.useForm();

    const uploadImg = (ev) => {
        console.log('aaa',ev.fileList[0])
        if (ev.fileList[0].percent == 0){
           setData(formData)
        }else if (ev.fileList[0].percent == 100 && ev.fileList[0].status != 'done'){
            setData(formData);
            setFormData(data);
        }
        setFileList(ev.fileList)
        if(ev.fileList[0].status == 'done'){
            formData.qrcode = ev.fileList[0].response.relativePath;
            setData(formData);
            setFormData(data);
        }
    }
    const onPreview = async file  => {
        console.log('file',file)
    }

    const addService = () => {
        let flag = false;
        for(let key in formData){
            if(formData[key] == ''){
                flag = true;
            }
        }
        if(flag){
            message.warning('请填写完整！')
        }else {
            http({
                url:'api/staff/addstaff',
                method:'post',
                params:formData
            }).then(res=>{
                if (res.code == 1){
                    message.success(res.msg);
                    navigate('/home/custormerservice');
                }else if(res.code == 500){
                    message.error(res.msg);
                }else {
                    message.warning(res.msg);
                }
            })
        }
    }

    const crop = {
        width: 180,  //裁剪宽度
        height: 180, //裁剪高度
        aspect: 180/180, //剪裁比例
        minZoom: 1, //最小倍数
        maxZoom: 10, //最大倍数
        resize: false, //裁剪是否可以调整大小
        resizeAndDrag: true, //裁剪是否可以调整大小、可拖动
        modalTitle: "上传轮播图", //弹窗标题
        modalWidth: 600, //弹窗宽度
        modalOk: '上传',
        modalCancel: '取消'
    };

    return(
    <Card className='control-Card'>
        <div className='header'>
            <h1>基本信息</h1>
            <hr/>
            <div className='form-card'>
                <Form form={form} initialValues={formData} labelCol={{span: 2}} wrapperCol={{span: 22}}>
                    <Form.Item name={'name'} label="客服姓名" rules={[{required:true,message:'请输入客服姓名'}]}>
                        <Input
                            allowClear
                            value={formData.name}
                            onChange={(ev)=>{formData.name = ev.target.value}}
                            placeholder="请填写客服姓名"
                            style={{width:'260px'}}
                        />
                    </Form.Item>
                    <Form.Item name={'phone'} label="客服手机号" rules={[{required:true,message:'请输入客服手机号'}]}>
                        <Input
                            allowClear
                            value={formData.phone}
                            onChange={(ev)=>{formData.phone = ev.target.value}}
                            placeholder="请填写客服手机号"
                            style={{width:'260px'}}
                        />
                    </Form.Item>
                    <Form.Item name={'wechat'} label="客服微信号" rules={[{required:true,message:'请输入客服微信号'}]}>
                        <Input
                            allowClear
                            value={formData.wechat}
                            onChange={(ev)=>{formData.wechat = ev.target.value}}
                            placeholder="请填写客服微信号"
                            style={{width:'260px'}}
                        />
                    </Form.Item>
                    <Form.Item name={'qrcode'} label="客服二维码" rules={[{required:true,message:'请上传客服二维码'}]}>
                        <Space direction="vertical" size={'middle'} style={{width:'100%'}}>
                            <ImgCrop {...crop} rotate>
                                <Upload
                                    action="api/uploadFile/oss"
                                    listType="picture-card"
                                    fileList={fileList}
                                    maxCount={1}
                                    onChange={uploadImg}
                                    onPreview={onPreview}
                                >
                                    {fileList.length ? fileList.length < 2 && '+ 上传二维码' : '+ 上传二维码'}
                                </Upload>
                            </ImgCrop>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
        <div className='Middle'>
            <h1>账户设置</h1>
            <hr/>
            <div className='form-card'>
                <Form form={form} initialValues={formData} labelCol={{span: 2}} wrapperCol={{span: 22}}>
                    <Form.Item name={'account'} label="账号" rules={[{required:true,message:'请输入账号'}]}>
                        <Input
                            allowClear
                            disabled
                            value={formData.account}
                            placeholder="请填写账号"
                            style={{width:'260px'}}
                        />
                    </Form.Item>
                    <Form.Item name={'password'} label="密码" rules={[{required:true,message:'请输入密码'}]}>
                        <Input
                            allowClear
                            value={formData.password}
                            onChange={(ev)=>{formData.password = ev.target.value}}
                            placeholder="请填写密码"
                            style={{width:'260px'}}
                        />
                    </Form.Item>
                    <Form.Item name={'adminphone'} label="手机号" rules={[{required:true,message:'请输入手机号'}]}>
                        <Input
                            allowClear
                            value={formData.adminphone}
                            onChange={(ev)=>{formData.adminphone = ev.target.value}}
                            placeholder="请填写手机号"
                            style={{width:'260px'}}
                        />
                    </Form.Item>
                </Form>
            </div>
        </div>
        <div className='footer'>
            <div className={'footer-buttons'}>
                <div><Button type={'primary'} onClick={addService}>添加</Button></div>
                <div><Link to="/home/custormerservice" className="cancel-Link"><Button>取消</Button></Link></div>
            </div>
        </div>
    </Card>
);
};
export default CreateLevel;
